import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { faker } from "@faker-js/faker";
import Image from "next/image";
import { getTranslations } from 'next-intl/server';

const mockList = Array.from({ length: 9 }).map((_, idx) => ({
  name: faker.person.fullName(),
  avatar: `/image/avatar/${(idx % 5) + 1}.jpg`,
}));
const ISeeList = mockList;
const SeeIList = mockList;

const gridList = (list: { name: string; avatar: string }[]) => {
  return (
    <div className="grid grid-cols-3 gap-4 mb-8 w-full">
      {list.map((item: { name: string; avatar: string }, idx: number) => (
        <div key={idx} className="flex flex-col items-center text-center">
          <div className="w-15 h-15 rounded-lg mb-2 cursor-pointer">
            <Image
              src={item.avatar}
              alt={item.name}
              width={80}
              height={80}
              className="rounded-lg transition-transform duration-300 hover:scale-110"
            />
          </div>
          <span className="text-black text-sm text-center w-full block">
            {item.name}
          </span>
        </div>
      ))}
    </div>
  );
};
async function HomeRight() {
  const t = await getTranslations();
  return (
    <div className="bg-white">
      <Tabs defaultValue="tab1" className="mb-8">
        <TabsList className="w-full flex gap-1">
          <TabsTrigger value="tab1" className="flex-1 cursor-pointer">
            {t("Who_has_seen_me")}
          </TabsTrigger>
          <TabsTrigger value="tab2" className="flex-1 cursor-pointer">
            {t("Who_have_I_seen")}
          </TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">
          <div className="w-full rounded-lg flex items-center justify-center pt-2">
            {gridList(ISeeList)}
          </div>
        </TabsContent>
        <TabsContent value="tab2">
          <div className="w-full rounded-lg flex items-center justify-center pt-2">
            {gridList(SeeIList)}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}

export default HomeRight;
